<script setup lang="ts">
import {usePageData, usePageFrontmatter} from "vuepress/client";
import {ref, watch} from "vue";

import CommonWrapper from "vuepress-theme-hope/components/CommonWrapper.js";
import HopeHomePage from "vuepress-theme-hope/components/HomePage.js";
import NormalPage from "vuepress-theme-hope/components/NormalPage.js";
import SkipLink from "vuepress-theme-hope/components/SkipLink.js";
import { FadeSlideY } from "vuepress-theme-hope/components/transitions/FadeSlideY.js";

import type {ThemePageFrontmatter} from "vuepress-theme-hope";

const page = usePageData();
const frontmatter = usePageFrontmatter<ThemePageFrontmatter>();

const sidebarTopArray = [
  `<a href="https://www.maxkey.top" target="_blank">
    <img className="no-zoom" height="50px" width="200px" src="/ggw/MaxKey.png" class="9999">
  </a>`,
  `<a href="https://ccflow.org/index.html?frm=warmflow" target="_blank">
    <img className="no-zoom" height="50px" width="200px" src="/ggw/ccflow.png" class="2025-03-03">
  </a>`,
];

const sidebarContent = ref("");

function shuffle(arr) {
  var l = arr.length;
  var index, temp;
  while (l > 0) {
    index = Math.floor(Math.random() * l);
    temp = arr[l - 1];
    arr[l - 1] = arr[index];
    arr[index] = temp;
    l--;
  }
  return arr;
}

watch(
  () => page.value.path,
  () => {
    if (page.value.path.startsWith("/en/")) {
      sidebarContent.value = "";

      return;
    }
    shuffle(sidebarTopArray);

    sidebarContent.value = `\
      <div style="font-size: 1.1em;line-height: 1.5; padding: 8px; padding-left: 4px;color: var(--text-color);">
      <a href="/master/other/paidservice.html#特别赞助" style="color: red;font-size: 0.9em;"">❤️特别赞助</a></div>
      <div style="width:230px;margin:5px auto;">
        ${sidebarTopArray.slice(0, sidebarTopArray.length).join("\n  ")}
      </div>
    `;
  },
);
</script>
<template>
  <SkipLink />
  <CommonWrapper>
    <template #default>
      <HopeHomePage v-if="frontmatter.home">
        <template #center>
          <div content="content"></div>
        </template>
      </HopeHomePage>
      <FadeSlideY v-else>
        <NormalPage :key="page.path">
          <template #contentBefore>
            <div content="content"></div>
          </template>
        </NormalPage>
      </FadeSlideY>
    </template>
    <template v-if="!frontmatter.home" #sidebarTop>
      <div v-html="sidebarContent" />
    </template>
  </CommonWrapper>
</template>
